<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">报表统计</block>
		</cu-custom>
		<!-- 顶部导航 -->
		<view>
			<!-- 顶部导航 -->
			<view class="topTabBar" :style="{position:headerPosition}">
				<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
					<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
				</view>
			</view>
			<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
			<view class="order-list">
				<view class="list">
					<uni-grid :column="3">
						<uni-grid-item style="background-color: #CCCCFF;">
							<text class="text">客户数</text>
							<text class="text">{{customerCount}}</text>
						</uni-grid-item>
						<uni-grid-item style="background-color: #FFCCCC;">
							<text class="text">订单数</text>
							<text class="text">{{orderCount}}</text>
						</uni-grid-item>
						<uni-grid-item style="background-color: #CCFFFF;">
							<text class="text">总金额</text>
							<text class="text">{{amount}}元</text>
						</uni-grid-item>
					</uni-grid>

					<view class="row" v-if="tabbarIndex == 0">
						<view v-if="list.length > 0" v-for="(item,index) in list" :key="index">
							<!-- <uni-row class="address">
								<uni-col :xs="24">
									<view>{{item.address}}</view>
								</uni-col>
							</uni-row> -->
							<uni-row style="margin-bottom: 5px;">
								<uni-col :xs="12" class="name">
									<view>{{item.customerName}}</view>
								</uni-col>
								<uni-col :xs="6" class="qty">
									<view style="text-align: center;">{{item.orderCount}}</view>
								</uni-col>
								<uni-col :xs="6" class="amount">
									<view class="price">￥{{formatNumber(item.amount)}}元</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-else>
							<uni-row>
								<uni-col :xs="24">
									<view class="onorder">当日无订单</view>
								</uni-col>
							</uni-row>
						</view>
					</view>

					<view class="row" v-if="tabbarIndex == 1">
						<view class="cu-form-group">
							<view class="title">开始日期</view>
							<picker mode="date" :value="startDate" :start="start" :end="end" @change="startDateChange">
								<view class="picker">{{startDate}}</view>
							</picker>
						</view>
						<view class="cu-form-group">
							<view class="title">结束日期</view>
							<picker mode="date" :value="endDate" :start="start" :end="end" @change="endDateChange">
								<view class="picker">{{endDate}}</view>
							</picker>
						</view>
						<button class="btn-primary" @click="query">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		uniRow,
		uniCol
	} from '@dcloudio/uni-ui'

	import {
		toLogin,
		formatDate,
		number_format
	} from "@/server/api.js";

	import {
		dailyOrderSummaryApi,
		historyOrderSummaryApi
	} from "@/server/config.js";

	import province from '@/static/mockjs/region';
	export default {
		components: {
			uniRow,
			uniCol
		},

		computed: {
			start() {
				return this.getDate('start');
			},
			end() {
				return this.getDate('end');
			}
		},

		onLoad(options) {
			this.tabbarIndex = 0;
			this.fetData()
			this.startDate = formatDate(new Date())
			this.endDate = formatDate(new Date())
		},
		onShow() {
			//his.showType();
			toLogin()
		},
		data() {
			return {
				headerPosition: "",
				orderType: ["当日订单", "历史订单"],
				//订单列表 演示数据
				list: [],
				tabbarIndex: 0,
				startDate: '',
				endDate: '',
				customerCount: 0,
				orderCount: 0,
				amount: 0
			};
		},
		onPageScroll(e) {
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
		},

		methods: {
			async fetData() {

				if (this.tabbarIndex == 0) {

					//获取今日的订单数量和明细
					this.dailyOrderSummary()
				}
			},

			startDateChange: function(e) {
				this.startDate = e.target.value
			},

			endDateChange: function(e) {
				this.endDate = e.target.value
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				
				if(tbIndex == 0){
					this.dailyOrderSummary()
				}else{
					this.query()
				}
				
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 2;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			
			formatNumber(item){
				return number_format(item)
			},

			async query() {
				if (new Date(this.endDate) - new Date(this.startDate) < 0) {
					uni.showToast({
						title: "结束日不能小于开始日", //提示的内容,
						duration: 1000, //延迟时间,
						icon: "none",
						mask: true, //显示透明蒙层，防止触摸穿透,
						success: res => {}
					});
					return
				}

				const res = await historyOrderSummaryApi({
					start: this.startDate,
					end: this.endDate
				})
				if (res.statusCode == 404) {
					//当日无订单
					this.customerCount = 0
					this.orderCount = 0
					this.amount = 0
				} else {
					this.customerCount = res.data.customerCount
					this.orderCount = res.data.orderCount
					this.amount = number_format(res.data.totalAmount)
				}
			},

			async dailyOrderSummary() {
				const res = await dailyOrderSummaryApi()
				console.info(res)
				if (res.statusCode == 404) {
					//当日无订单
					this.customer = 0
					this.orderCount = 0
					this.amount = 0
					this.list = []
				} else {

					this.customerCount = res.data.customerCount
					this.orderCount = res.data.orderCount
					this.amount = number_format(res.data.totalAmount)

					let list = res.data.summary
					let _this = this;
					list.forEach(item => {
						
						//设置省市区
						let selectProvince =
							province.find((o) => o.id == item.province) || {}
						
						//市
						let selectCity = null;
						if (selectProvince) {
							let cityList = selectProvince.children
							selectCity = cityList.find((o) => o.id == item.city)
						}
						
						let selectArea = null;
						//区
						if (selectCity) {
							let areaList = selectCity.children
							selectArea = areaList.find((o) => o.id == item.district)
						}
						
						if(selectProvince && selectCity && selectArea){
							_this.$set(item, 'address', selectProvince.value + selectCity.value + selectArea.value + (item.address || ''))
						}
					})
					
					this.list = list
				}
			}
		},

	};
</script>

<style lang="scss">
	@import "./style.scss";
</style>
